#View Transitions API

View Transitions API を利用すれば、画面の更新前後で重複することなく DOM を変更するスムーズな画面遷移を簡単に実現出来ます。モバイルアプリのページ遷移をイメージすると良いでしょう。

今までも実装を頑張れば、このような実装は可能でしたが、View Transitons API の登場によって、より無駄なく簡素な記述で可能になりました。

document.startViewTransition(() => {
	// 画面の更新処理
	navigate(...)
});

.page-header {
  /* 画面遷移中に共有、重複しない要素に名前をつける */
  view-transition-name: page-header;
  contain: paint;
}

/* 画面遷移時に更新前の画面がどのように振る舞うか */
::view-transition-old(root) {
  mix-blend-mode: plus-lighter;
  animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both fade-out;
}

/* 画面遷移時に更新後の画面がどのように振る舞うか */
::view-transition-new(root) {
  mix-blend-mode: plus-lighter;
  animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both fade-in;
}

賢い方は、ここまで見て MPA では利用できなさそうだなと思われるかもしれません。ですが今後 MPA への対応が予定されており、実はすでに実験的な機能としてフラグを有効化すれば利用することが出来ます。興味のある方は、このドキュメントを見てください。

#Style Queris

2022 年 9 月に Chrome 105 でリリースされたコンテナクエリの拡張で、コンテナ要素のスタイルに合わせて、子要素のスタイルを指定できるようになります。

現状 Chrome 111 では、CSS 変数を利用している場合のみ利用できます。

@container style(--theme: warm) {
  .card {
    background-color: wheat;
    border-color: brown;
  }
}

https://developer.chrome.com/blog/style-queries/

#CSS Color Module Level 4

高解像度ディスプレイがサポートされ、選択できる色が 50%増えて 1,600 万色になったらしいです。すごいですね。 また CSS 関数 color()、lch()、oklab()、color-mix()などがサポートされ、12 の新しい色空間と 7 つの新しい色域を利用できるようになりました。

これにより、今まで以上に凝ったデザインを簡単に実現できるようになりますし、特にグラデーションや色を使ったアニメーションはより美しいものを作れるようになるでしょう。

#CSS 三角関数の追加

CSS 関数 sin()、cos()、tan()、acos()、asin()、atan()、atan2(x,y) がサポートされました。

あまり使う機会はないかもしれませんが、例えば波状のアニメーションはとても簡単に実装できるようになりました。

#CSS セレクター の拡張 of S

基本的な記法は:nth-child(an + b of S)です。S にはセレクターを指定し、S の条件に合うものの内 an + b 番目のものを対象に取ります。

/* highlightクラスを持っている子要素の中で2番目を選択する。*/
:nth-child(2 of .highlight) {
}

/* highlightクラスを持っている且つ2番目の子要素を選択する。 */
.highlight:nth-child(2) {
}

S を複数指定することも出来ます。

/* highlightクラスまたはsaleクラスを持っている子要素の中で2番目を選択する */
:nth-child(4 of .highlight, .sale) {
}

これが特に便利なケースとして、Chrome のドキュメントにも挙げられている不可視の要素を省いたスタイル付けが挙げられます。今まではフィルター機能のあるテーブルでストライプ柄を維持するのは面倒でした。

tr:nth-child(even of :not([hidden])) {
  background-color: lightgrey;
}